<template>
    <div class="capacity-box">
        <div class="capacity-article">
            <div class="used-article" :style="{width:usedArticle + 'px'}"></div>
        </div>
        <p class="capacity-text" v-text="capacityText"></p>
    </div>
</template>

<script>
  export default {
    name: "CapacityArticle",
    data() {
      return {
        usedArticle: 0,
        capacityText:''
      }
    },
    props: {
      capacity: {
        type: Number,
        default: function () {
          return 140
        }
      },
      used: {
        type: Number,
        default: function () {
          return 0
        }
      }
    },
    watch: {
      used: function () {
        this.calculationArticle()
      },
      capacity: function () {
        this.calculationArticle()
      }
    },

    created() {
      this.calculationArticle()
    },
    methods: {
      calculationArticle: function () {
        this.usedArticle = this.used / this.capacity * 180
        this.capacityText = this.getFileSize(this.used, 1) + '/' + this.getFileSize(this.capacity, 1)
      },
      getFileSize: function (size,fixed) {
        if(!size || size === -1){
          return '0K'
        }
        const currentFixed = fixed || 2
        if (size < 1024) {
          return size + 'B'
        } else if (size < 1048576) {   //1024 * 1024
          return (size/1024).toFixed(currentFixed) + 'K'
        } else if (size < 1073741824) {   //1024 * 1024 * 1024
          return (size/1048576).toFixed(currentFixed) + 'M'
        } else if (size < 1099511627776) {  //1024 * 1024 * 1024 * 1024
          return (size/1073741824).toFixed(currentFixed) + 'G'
        } else if (size < 1125899906842624) {   //1024 * 1024 * 1024 * 1024 * 1024
          return (size/1099511627776).toFixed(currentFixed) + 'T'
        }
      }
    }
  }
</script>

<style scoped>

    .capacity-box{
        width: 100%;
    }
    .capacity-article {
        width: 100%;
        background: #d4d7e0;
        height: 3px;
        position: relative;
        overflow: hidden;
        border-radius: 3px;
    }

    .capacity-article .used-article {
        position: absolute;
        left: 0;
        top: 0;
        height: 3px;
        background: #4690F5;
    }

    .capacity-text {
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.86px;
        height: 17px;
        line-height: 17px;
        margin-top: 5px;
        font-weight: normal;
    }

</style>
